<template>
  <div class="tabControl">
    <router-link class="item" v-for="(item,index) in titles" :key="index" :to="item.type">
      <span>{{ item.name }}</span>
    </router-link>
  </div>
</template>

<script scoped>
export default {
   name: 'TabControl',
   props: {
     titles: {
       type: Array,
       default: []
     }
   },
   data() {
       return {
         currentIndex: 0
       }
   },
   methods: {

   },
    watch: {
      $route(to, from) {
        var index;
        console.log(to);
        let type=to.params.type
        if(type==='pop') {
          index=0;
        }
        if(type==='new') {
          index=1;
        }
        if(type==='sell') {
          index=2;
        }
        console.log(index);

        this.$emit('itemClick',index)
      }
  }
}
</script>

<style lang='less'>
  .tabControl {
    display: flex;
    line-height: 0.8rem;
    font-size: .3rem;
    background-color: #fff;
    .item {
      flex: 1;
      text-align: center;
    }
    .active span{
      padding: 5px;
      color: @color-high-text;
      border-bottom: .04rem solid @color-high-text;
    }
  }
</style>
